<template>
    <fy-card style="text-align: left; padding: 0">
        <template #body>
            <div class="article-wrapper" @click="goToDetail(blog.id)">
                <div :class="articleCover">
                    <FyImg class="img" v-image-load="imgUrl"/>
                </div>
                <div class="article-content">
                    <div class="title">{{blog.title}}</div>
                    <div class="meta">作者：{{blog.author}} | 发布时间：{{blog.date}}</div>
                    <!-- <ArticleMetaView :contain-second-line="false" horizontal="left"/> -->
                    <div class="content" ref="textContainer">{{blog.content}}</div>
                </div>
            </div>
        </template>
    </fy-card>
</template>

<script setup>
import { computed, nextTick, onMounted, onUpdated, ref } from 'vue';
import { useRouter } from 'vue-router'
import TextUtils from "@/utils/TextUtils";

import FyCard from '@/components/base/FyCard.vue';
import FyImg from '@/components/base/FyImg.vue';

const props = defineProps({
    blog: {
        type: Object,
        require: true
    },
    horizontal: {
        type: String,
        default: "left"
    }
})

// http://img.mrzym.top/FswlMLf30bR2MeXCgorQSkUQ3ky1
const imgUrl = ref("./src/assets/img/article-cover.png")

const router = useRouter()

let goToDetail = (id)=> {
    console.log('跳转到详情页面：id=' + id);
    router.push({name:'detail', params:{id}})
}

let articleCover = computed(() => {
    return props.horizontal === "left" ? "article-cover" : "article-cover right";
});

const textContainer = ref(null);

onMounted(() => {
    // console.log('textContainer::', textContainer.value);
    nextTick(() => { // 等待dom渲染完成在操作，不然可能不生效
        TextUtils.truncateMultiLine(textContainer.value, 3);
    })
})

</script>

<style lang="scss" scoped>

.article-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;

    cursor: pointer;
    min-width: 100%;
    height: 15em;
    // overflow: clip;

    .article-cover {
        overflow: hidden;
        height: 100%;
        width: 42%;
        // background-color: orchid;
        .img {
            width: 100%;
            height: 100%;
            transition: all 0.6s ease;
            // filter: blur(0.5px) brightness(90%)
        }
    }
    
    .right {
        order: 1;
    }

    .article-content {
        text-align: left;
        padding: 0 40px;
        width: 58%;
        overflow: hidden;
        text-overflow: ellipsis;
        // background-color: plum;
        .title {
            font-size: 1.5em;
        }

        .meta {
            margin: 5px 0;
            font-size: 0.9rem;
            // color: $text-color-777;
        }

        .content {
            overflow: hidden;
            // font-size: 1rem;
            text-align: left;
            // color: $text-color-333;
        }
    }

    &:hover {
        .img {
            transform: scale(1.1);
            // filter: blur(0px) brightness(100%);
        }

        .title {
            color: var(--primary-color);
        }
    }

    @media (max-width: 767px) {
        flex-direction: column;
        height: auto;

        .article-cover {
            width: 100%;
            height: 230px;
            order: 0;
        }

        .article-content {
            width: 100%;
            padding: 20px 15px;
        }
    }
}
</style>
